<template>
  <div class="board">
    <el-header>
      <el-select v-model="familystatus" multiple placeholder="家居设备状态">
        <el-option
          v-for="item in familystatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input placeholder="房号" v-model="onceInfo.homenum" style="width: 200px"></el-input>

      <!-- 查询 -->
      <el-button type="primary" @click="getOnceData">
        <i class="el-icon-search"></i>
      </el-button>
    </el-header>

    <el-tabs>
      <el-tab-pane label="智能设备" name="first">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="单元名称">
            <template slot-scope="scope">
              <span>{{ scope.row.unitname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="栋号">
            <template slot-scope="scope">
              <span>{{ scope.row.buildnum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="房号">
            <template slot-scope="scope">
              <span>{{ scope.row.homenum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="房主">
            <template slot-scope="scope">
              <span>{{ scope.row.homename }}</span>
            </template>
          </el-table-column>
          <el-table-column label="空调">
            <template slot-scope="scope">
              <span>{{ scope.row.airnum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Wi-Fi">
            <template slot-scope="scope">
              <span>{{ scope.row.wifiname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="洗衣机">
            <template slot-scope="scope">
              <span>{{ scope.row.washnum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="授予时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createtime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.homestatus == 1">完好</span>
              <span v-else>待维修</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.familystatus" @change="familystatusChange"></el-switch>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="家居设备" name="second">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="单元名称">
            <template slot-scope="scope">
              <span>{{ scope.row.unitname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="栋号">
            <template slot-scope="scope">
              <span>{{ scope.row.buildnum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="房号">
            <template slot-scope="scope">
              <span>{{ scope.row.homenum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="房主">
            <template slot-scope="scope">
              <span>{{ scope.row.homename }}</span>
            </template>
          </el-table-column>
          <el-table-column label="书桌">
            <template slot-scope="scope">
              <span>{{ scope.row.homedesk }}</span>
            </template>
          </el-table-column>
          <el-table-column label="椅子">
            <template slot-scope="scope">
              <span>{{ scope.row.homechair }}</span>
            </template>
          </el-table-column>
          <el-table-column label="衣柜">
            <template slot-scope="scope">
              <span>{{ scope.row.homeclothes }}</span>
            </template>
          </el-table-column>
          <el-table-column label="授予时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createtime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.homestatus == 1">完好</span>
              <span v-else>待维修</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" fixed="right" width="150">
            <el-switch v-model="sendInfo.familystatus" ></el-switch>
          </el-table-column>-->
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- <Pagination
      :page="sendInfo.page"
      :componentTotal="componentTotal"
      @changeRows="setRows"
      @changePage="setPage"
    ></Pagination>-->
  </div>
</template>

<script>
import axios from "axios";
import Cookies from "js-cookie";
import Pagination from "@/components/Pagination";
export default {
  data() {
    return {
      familystatus: true,
      fileList: [],
      queryInfo: {
        userName: "",
        userId: "",
        userPhone: ""
      },
      // familystatus: [],
      // familystatus: [
      //   { value: 1, label: "完好" },
      //   { value: '', label: "待维修" }
      // ],
      // selectFamilystatus: [],
      srcList: [],
      tableData: [],
      sendInfo: {},
      Token: "",
      componentTotal: 0,
      listHander: {
        id: "反馈Id",
        username: "用户名",
        mobile: "手机号码",
        feedType: "反馈类型",
        content: "反馈内容",
        addTime: "添加时间"
      },
      dialogVisibleUrl: false, //图片模态框控制器
      dialogImageUrl: [],
      dialogFormVisible: false,
      onceInfo: {
        smartstatus: "",
        familystatus: "",
        homenum: "",
        startDate: "",
        endDate: "",
        currPage: 0,
        pageNum: 10
      },
      token:
        "eeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjEyLCJ1c2VybmFtZSI6ImFkbWluIiwiZW1haWwiOiJ3ZSIsImhlYWQiOiIyMDI0MDMwODE5Mzc1Nzg3MTE4OTAuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3MTE0MTQwNTgsImV4cCI6MTcxMTUwMDQ1OH0.2xNMp69GtTbiIq_-hfV7GYH0WO6gyEanoXWXefHzmqE"
    };
  },
  methods: {
    familystatusChange(value) {
      // 根据开关的值，设置你需要的状态码
      console.log("Switch state code:", value);
      this.familystatuss = value;
    },
    // 查询按钮的方法
    async getOnceData() {
      const { data: res } = await axios.get(
        `http://community.byesame.com/house/searchdeviceList?token=${this.Token}`,
        {
          params: this.onceInfo
        }
      );
      // if (res.code != 200) return this.$message.error("查询失败");
      this.tableData = res.data;
      this.componentTotal = res.total;
      console.log(this.tableData);
    },
    async getTableData() {
      const { data: res } = await axios.get(
        "http://community.byesame.com/house/gethouseList?pageNum=10&currPage=0",
        {
          params: this.sendInfo
        }
      );
      console.log(6);
      console.log(res);
      // if (res.code != 200) return this.$message.error("查询失败");
      this.tableData = res.data;
      this.componentTotal = res.total;
      console.log(this.tableData);
    },
    created() {
      this.getTableData();
    },

    // 分页器
    setRows(n) {
      this.sendInfo.limit = n;
      this.getTableData();
    },
    setPage(n) {
      this.sendInfo.page = n;
      this.getTableData();
    },

    // 点击模态框的取消，模态框消失
    quit() {
      this.dialogFormVisible = false;
      this.getTableData();
    },

    async removeUser(row) {
      const { data: res } = await this.axios.get(
        `http://community.byesame.com/house/delunitList?id=${id}&token=${this.Token}`,
        {
          communityname: row.communityname,
          unitname: row.unitname,
          unitnum: row.unitnum,
          createtime: row.createtime,
          unitstatus: row.unitstatus
        },
        {
          // headers: {
          //   "X-Litemall-Admin-Token": this.Token
          // }
        }
      );
      if (res.errno != 0) return this.$message.error("删除角色失败");
      this.$message.success("删除角色成功");
      this.getTableData();
    },
    // 删除
    handleDelete(row) {
      console.log(row);
      this.$confirm("是否永久删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.removeUser(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 添加接口
    async addFrom() {
      const { data: res } = await this.axios.post(
        `http://community.byesame.com/users/getUserByToken?token=${this.Token}`,
        this.queryInfo,
        {
          // headers: {
          //   "X-Litemall-Admin-Token": this.Token
          // }
        }
      );
      if (res.errno != 0) return this.$message.error("添加失败");
      this.$message.success("添加成功");
      this.dialogFormVisible = false;
      this.getTableData();
    },
    gotoAdd() {
      this.$router.push({
        path: "/message/increase"
      });
    },
    // 编辑
    // handleEdit() {
    //    this.$router.push({
    //     path: "/message/unitDetails"
    //   });
    // },
    // 点击添加
    addData() {
      this.fileList = [];
      this.queryInfo = {
        desc: "",
        floorPrice: "",
        name: "",
        picUrl: ""
      };
      this.dialogFormVisible = true;
    }
  },
  mounted() {
    this.Token = Cookies.get("Admin-Token");
    this.getTableData();
  },
  components: {
    Pagination
  },
  computed: {
    headers() {
      return {
        //上传图片时，携带请求头
        "X-Litemall-Admin-Token": this.Token
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.board {
  padding: 20px;
}
.vatimg {
  width: 145px;
  height: 145px;
  display: block;
}
</style>